<template>
    <div class="main-content">
        <div style="display: flex; grid-gap: 10px; align-items: flex-start;">
            <div style="width: 150px;" class="card">
                <!-- 静态 -->
                <div 
                    class="category-item"
                    :class="{ 'category-item-active': activeCategory === category }"
                    v-for="(category, index) in categories"
                    :key="index"
                    @click="setActiveCategory(category)"
                >
                    {{ category }}
                </div>
                <!-- 连接后端 -->
                <!-- <div class="category-item" :class="{ 'category-item-active': item.name === current }"
                 v-for="item in categoryList" :key="item.id" @click="selectCategory(item.name)">{{ item.name }}</div> -->
            </div>

            <component :is="currentComponent" />
            
            <div style="width: 260px">
                <div class="card">
                  <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px; text-align: center">Azraelkaxi，你好</div>
                  <div style="font-size: 40px">
                    <i class="el-icon-edit" style="margin:0 40px; cursor:pointer" @click="$router.push('/front/newBlog')"></i>
                    <i class="el-icon-document" style="cursor:pointer" @click="$router.push('/front/answer')"></i>
                  </div>

                  <div style="font-size: 15px; font-weight: bold; margin-left: 35px;">
                    <a>写文章</a>
                    <a style="margin-left: 30px">问答问题</a>
                  </div>

                  <div style="font-size: 40px">
                    <i class="el-icon-data-line" style="margin:0 40px; cursor:pointer" @click="$router.push('/front/question')"></i>
                    <i class="el-icon-link" ></i>
                  </div>
                  <div style="font-size: 15px; font-weight: bold; margin-left: 45px;">
                    <a>提问</a>
                    <a style="margin-left: 50px">分享</a>
                  </div>

                  <div style="text-align: center; ">
                    <el-button type="warning"  style="width: 200px; margin-top: 10px">签到</el-button>
                  </div>
                </div>

                <div style="margin-top: 10px;" class="card">
                    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">欢迎您!😊</div>
                    <div style="color: #666;">云隙...=w=</div>
                </div>

                <div style="margin-top: 10px;" class="card">
                    <div style="display: flex; align-items: center; color:#666; padding-bottom: 10px; border-bottom: 1px solid #ddd;">
                        <div style="font-size: 20px; flex: 1;">热门话题</div>
                        <div style="font-size: 12px; color: #666; cursor: pointer;"><i class="el-icon-refresh">换一换</i></div>
                    </div>
                    <div>
                        <!-- <div v-for="item in showList" :key="item.id" style="margin: 15px 0" class="line1">
                            <a :href="'/front/blogDetail?blogId=' + item.id" target="_blank">
                                <span style="width: 18px; display: inline-block; text-align: right; margin-right: 10px">
                                <span style="color: gold" v-if="item.index === 1">{{ item.index }}</span>
                                <span style="color: silver" v-else-if="item.index === 2">{{ item.index }}</span>
                                <span style="color: darkgoldenrod" v-else-if="item.index === 3">{{ item.index }}</span>
                                <span style="color: #666" v-else>{{ item.index }}</span>
                                </span>
                                <span style="color: #666;">{{ item.title }}</span>
                            </a>
                        </div> -->
                        <div style="margin: 20px 0;" class="line3"><span style="color: gold;">1</span><span style="color: #666; margin-left: 7px;">生命的意义在于什么？</span></div>
                        <div style="margin: 20px 0;" class="line3"><span style="color: silver;">2</span><span style="color: #666; margin-left: 7px;">青年人应该何去何从</span></div>
                        <div style="margin: 20px 0;" class="line3"><span style="color: darkgoldenrod;">3</span><span style="color: #666; margin-left: 7px;">三国中有名的辩论</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>4</span><span style="color: #666; margin-left: 7px;">【安静】电影《碁盘斩》</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>4</span><span style="color: #666; margin-left: 7px;">电影《心迷宫》</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>5</span><span style="color: #666; margin-left: 7px;">电影《出门的世界》</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>6</span><span style="color: #666; margin-left: 7px;">电影《魅惑》</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>7</span><span style="color: #666; margin-left: 7px;">今日黄金</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BlogChange from '@/components/BlogChange'
import BlogList2 from '@/components/Blog/BlogList2'
import BlogList3 from '@/components/Blog/BlogList3'

export default {
    components:{
        BlogChange,
        BlogList2,
        BlogList3,

    },
    data() {
        return {
            current: '主页',
            categories: ['主页','通知', '核查'],
            activeCategory: '主页',
        };
    },
    computed: {
        currentComponent() {
            const componentMap = {
                '主页': BlogChange,
                '通知': BlogList2,
                '核查': BlogList3,
            };
            return componentMap[this.activeCategory];
        }
    },
    methods: {
        setActiveCategory(category) {
            this.activeCategory = category;

        },
        
    }
}
</script>

<style scoped>
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.blog-box{
    display: flex; 
    grid-gap: 15px;
    padding: 10px 0; 
    border-bottom: 1px solid #666666;
}
.blog-box:first-child{
    padding-top: 0;
}
.blog-title{
   font-size: 18px; 
   font-weight: bold; 
   margin-bottom: 10px;
   cursor: pointer;
}
.blog-title:hover{
    color: #2a60c9;
}
</style>